<template>
	<div class="sw_system_container">
		<div class="sw_query_form" v-if="$isHasAuth(topButtons)">
			<div class="button" v-hasPermi="'5c65394400a04739a6f5642a9ca1abcf'">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
			</div>
			<el-form size="small" inline v-hasPermi="'43f0e6a6cf5c49ecacc771c09046a8f7'">
				<el-form-item>
					<el-input v-model="queryData.name" clearable placeholder="角色名称" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.type" clearable placeholder="角色类型" style="width: 100px">
						<el-option v-for="(item, index) in dictEnums['ROLE_TYPE']" :key="index" :label="item.msg" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="getTabelData">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="sw_table_container">
			<el-table size="medium" :data="tableData" stripe height="100%">
				<el-table-column type="index" label="序号" width="54"></el-table-column>
				<el-table-column prop="name" label="角色名称" min-width="200"></el-table-column>
				<!-- <el-table-column prop="content" label="角色描述" min-width="200"></el-table-column> -->
				<el-table-column label="角色类型" min-width="150">
					<template slot-scope="{ row }">
						<el-tag
							size="medium"
							disable-transitions
							v-for="(item, index) in dictEnums['ROLE_TYPE']"
							:key="index"
							:type="item.value | tagFilter"
							v-if="row.type === item.value"
						>
							{{ item.msg }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createName" label="创建人" min-width="120"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
				<el-table-column label="操作" width="230" v-if="$isHasAuth(tableButton)">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" v-hasPermi="'ab818ba1ff3345df9e5db030761bb877'" @click="handleConfigMenu(row)">配置菜单</el-button>
						<el-button size="medium" type="text" v-hasPermi="'b70d5278616d484ea7f5d6324013dce0'" @click="handleSelectUser(row)">选择人员</el-button>
						<el-button size="medium" type="text" v-hasPermi="'27aa989fda2c4e278d1727bd14c34b3f'" @click="handleOpenDialog(row)">修改</el-button>
						<el-button size="medium" type="text" v-hasPermi="'787b0be6450b4a3ead3714b4c1e8b094'" @click="handleDeleteData(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="getTabelData"></sw-pagination>
		<role-form v-model="roleDialog" :role-data="roleData" @refresh="getTabelData"></role-form>
		<config-menu v-model="menuDrawer" :data="roleData"></config-menu>
		<select-user v-model="selectUser" :role-id="roleId" @refresh="getTabelData"></select-user>
	</div>
</template>

<script>
import roleForm from './form';
import { mapGetters } from 'vuex';
import configMenu from './configMenu';
import selectUser from './selectUser';
import { getRoleList, deleteRole } from '@/api/system/tbSysRole';
export default {
	components: { roleForm, configMenu, selectUser },
	data() {
		return {
			loading: false,
			dataCount: 0,
			queryData: {
				page: 1,
				limit: 15
			},
			tableData: [],
			roleDialog: false,
			roleData: {},
			menuDrawer: false,
			roleId: null,
			selectUser: false
		};
	},
	filters: {
		tagFilter(input) {
			switch (input) {
				case '1':
					return 'danger';
					break;
				case '2':
					return 'warning';
					break;
				case '3':
					return 'success';
					break;
				case '4':
					return 'info';
					break;
			}
		}
	},
	computed: {
		...mapGetters(['dictEnums']),
		topButtons() {
			return ['5c65394400a04739a6f5642a9ca1abcf', '43f0e6a6cf5c49ecacc771c09046a8f7'];
		},
		tableButton() {
			return ['27aa989fda2c4e278d1727bd14c34b3f', '787b0be6450b4a3ead3714b4c1e8b094', 'ab818ba1ff3345df9e5db030761bb877', 'b70d5278616d484ea7f5d6324013dce0'];
		}
	},
	mounted() {
		this.getTabelData();
	},
	methods: {
		//获取表格数据
		async getTabelData() {
			let params = { ...this.queryData };
			let result = await getRoleList(params).then((res) => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = !result.data ? [] : result.data;
			}
		},

		//打开表单
		handleOpenDialog(data) {
			this.roleDialog = true;
			this.roleData = { ...data };
		},

		//删除数据
		handleDeleteData(row) {
			let that = this;
			that.$confirm(`此操作将删除角色<font color="#f00">【${row.name}】</font>, 是否继续?`, '删除提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				dangerouslyUseHTMLString: true,
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteDataRequest(row);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//打开抽屉
		handleConfigMenu(row) {
			this.roleData = row;
			this.menuDrawer = true;
		},

		//删除数据请求
		async deleteDataRequest(row) {
			let result = await deleteRole(row.id).then((res) => res.data);
			if (result.code === '0') {
				this.getTabelData();
				this.$showCustomMessage('success', `删除角色成功`);
			}
		},

		//选择用户
		handleSelectUser(row) {
			this.roleId = row.id;
			this.selectUser = true;
		}
	}
};
</script>

<style scoped></style>
